@charset "utf-8";
@import "option_common/option_common";

.classics{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .classics_back{
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }   
    }
    .classics_lamplight{
        position: absolute;
        top: r(0px);
        img{
            width: 100%;
        }
    }
    .classics_figure{
        position: absolute;
        top: r(100px);
        z-index: 1;
        animation: baffle 2s linear  ;
        animation-fill-mode: forwards;
        animation-name:bounceInRight ;
        img{
            width: 100%;
        }
    }
    .classics_soap{
        position: absolute;
        top: r(138px);
        right: r(-500px);
        z-index: 9;
        animation: soap 2s linear ;
        animation-fill-mode: forwards;
          animation-name:zoomInDown ;
        img{
            width: 50%;
        }
    }
    .classics_baffle2{
         position: absolute;
        top: r(292px);
        left: r(-8px);
        z-index: 1;
        animation: baffle2 2s linear  ;
        animation-fill-mode: forwards;
        animation-name:bounceInLeft ;
        img{
            width: 55%;
        }
    }
    .classics_baffle{
        position: absolute;
        top: r(376px);
        right: r(-400px);
        z-index: 10;
        animation: baffle 2s linear  ;
        animation-fill-mode: forwards;
        animation-name:bounceInRight ;
        img{
            width: 48%;
        }
    }
    .classics_grid{
        position: absolute;
        top: r(460px);
        right: r(-380px);
        img{
            width: 66%;
        }
    }
}
@keyframes baffle{
    0%{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translateX(1px);
    }
}
//@keyframes soap{
//  0%{
//      opacity: 0;
//      transform: translateX(-5500px);
//  }
//  to{
//      opacity: 1;
//      transform: translateX(0px);
//  }
//}
.oldsong{
   display: none;
   position: absolute;
     left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .oldsong_back{
        img{
            width: 100%;
             height: 100%;
        }
    }
    .oldsong_lamplight{
        position: absolute;
        top: r(0px);
        right: r(-374px);
        img{
            width: 60%;
        }
    }
    .oldsong_oldman{
        position: absolute;
        top: r(100px);
        left: r(40px);
        z-index: 1;
        animation: oldman 1s linear  2s infinite;
       animation-fill-mode: forwards;
       
        img{
            width: 80%;
        }
    }
    .oldsong_flower{
        position: absolute;
        top: r(320px);
         animation: oldflower 1s linear ;
       animation-fill-mode: forwards;
       animation-name:bounceInDown ;
        img{
            width: 96%;
        }
    }
}
@keyframes oldflower{
    0%{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translateX(20px);
    }
}
@keyframes oldman {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}
.movie{
     display: none;
     position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .movie_back{
        img{
            width: 100%;
             height: 100%;
        }
    }
    .movie_character{
        position: absolute;
        top: r(70px);
        left: r(20px);
         animation: mocharacter .5s linear  2s  ;
       animation-fill-mode: forwards;
        img{
         width: 90%;   
        }
    }
    .movie_figure{
        position: absolute;
        top: r(200px);
        left: r(80px);
         animation: figurem .5s linear  2s infinite;
       animation-fill-mode: forwards;
       
        img{
            width: 100%;
        }
    }
    .movie_waht{
        position: absolute;
        top: r(300px);
        right: r(-60px);
         animation: what 1s linear  2s infinite;
       animation-fill-mode: forwards;
         animation-name:zoomInDown ;
        img{
            width: 50%;
        }
    }
    .movie_wall{
        position: absolute;
        bottom: r(240px);
        left: r(0px);
        animation: wall 1s linear  2s infinite;
       animation-fill-mode: forwards;
        img{
            width: 100%;
        }
    }
}
@keyframes what{
    0%{
        width: 10%;
    }
    to{
        width:30%；
     
    }
}
@keyframes figurem{
   0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes wall{
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(2px);
    }
    50% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes mocharacter{
    0%{
        transform: scale(0.1);
    }
    to{
        transform: scale(1);
    }
}

.rock{
      display: none;
      position: absolute;
     left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .rock_back{
         width: 100%;
        height: 100%;
        img{
            width: 100%;
             height: 100%;
        }
    }
    .rock_lamplight{
         position: absolute;
        top: r(0px);
        left: r(0px);
        img{
            width: 100%;
        }
    }
     .rock_character{
         position: absolute;
        top: r(200px);
        right: r(-220px);
        z-index: 1;
         animation: character .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
     .rock_figure{
         position: absolute;
        top: r(300px);
        left: r(0px);
        animation: figure1 .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 60%;
        }
    }
     .rock_figure2{
         position: absolute;
        top: r(310px);
        right: r(-295px);
          animation: figure2 .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 55%;
        }
    }
     .rock_grid{
         position: absolute;
        top: r(520px);
        left: r(0px);
        img{
            width: 100%;
        }
    }
     .rock_man{
         position: absolute;
        top: r(136px);
        right: r(-310px);
          animation: man .1s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
     .rock_pi{
         position: absolute;
        bottom: r(530px);
        left: r(238px);
        animation: pi 2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 65%;
        }
    }
     .rock_wow{
         position: absolute;
        top: r(278px);
        left: r(0px);
         animation: wow .2s linear  1.3s infinite;
       animation-fill-mode: forwards;
        img{
            width: 45%;
        }
    }
}
@keyframes pi{
    0%{
        opacity: 0;
    }
    to{
        opacity: 1;
        transform: translateY(50px);
    }
}
@keyframes wow{
    0%{
//      opacity: 0;
//  transform: translateX(30px);
    }
    to{
//      opacity: 1;
        transform: translateY(30px);
    }
}
@keyframes figure1{
    0%{
        
    }
    to{
        transform: translateY(20px);
    }
}
@keyframes figure2{
    0%{
        
    }
    to{
        transform: translateX(-20px);
    }
}
@keyframes man{
    0%{
        
    }
    to{
        transform: rotateZ(5deg);
    }
}
@keyframes character{
    0%{
        
    }
    to{
        transform: rotatex(-50deg);
    }
}

.rb{
    display: none;
     position: absolute;
     left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   overflow: hidden;
    .rb_back{
         width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .rb_chearacter{
        position: absolute;
        top: r(120px);
        left: r(80px);
        display: block;
        animation: suofang 3s infinite alternate;
        img{
            width: 30%;
             animation: autoRotate 2s linear  1.3s infinite;
                   animation-fill-mode: forwards;
            &:nth-of-type(2){
                width: 20%;
                animation: autoRotate 2s linear  1.1s infinite;
                   animation-fill-mode: forwards;
            }
             &:nth-of-type(3){
                width: 15%;
                 animation: autoRotate 2s linear  1s infinite;
                   animation-fill-mode: forwards;
            }
        }
    }
    @keyframes suofang{
        0%{ transform: scale(.5,.5);}
        90%{ transform: scale(1.1,1.1);}
        100%{ transform: scale(1,1);}
    }
    .rb_floweer{
        position: absolute;
          top: r(260px);
        right: r(-120px);
        z-index: 1;
        animation: flower_two 1s linear  2s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
    .rb_lamplight{
        position: absolute;
          top: r(0px);
        left: r(0px);
        img{
            width: 100%;
        }
    }
    .rb_car{
        position: absolute;
          top: r(280px);
        left: r(0px);
        animation:rbcar .2s 1000ms infinite;
        img{
            width: 100%;
        }
    }
    .rb_floweer2{
        position: absolute;
          top: r(280px);
        left: r(60px);
        opacity: 0;
         animation: flower 1s linear  2s infinite;
       animation-fill-mode: forwards;
        img{
            width: 50%;
        }
    }
}
@keyframes rbcar{
    form{
        top: r(280px);
//      left: r(0px);
    }
    to{
        top: r(290px);
//      left: r(30px);
    }
}
 @keyframes autoRotate{
        0%{
            opacity: 0;
        }
        to {
            transform:   translateY(-30px);
            opacity: 1;
        } 
 }
 @keyframes flower{
     0%{
         opacity: 0;
     }
     to{
         transform: translateX(-20px);
         opacity: 1;
     }
 }
  @keyframes flower_two{
     0%{
         opacity: 0;
     }
     to{
         transform: translateX(50px);
         opacity: 1;
     }
 }

.fashion{
    display: none;
   position: absolute;
     left: 0;
    top: 0;
    height: 100%;
    width: 100%;
   overflow: hidden;
   .fashion_back{
        img{
            width: 100%;
             height: 100%;
        }
    }
    .fashion_character{
        position: absolute;
        top: r(60px);
        left: r(20px);
        z-index: 1;
        animation: facharacter 1s linear   ;
       animation-fill-mode: forwards;
      animation-name:bounceInRight ;
      animation-delay:200ms;
        img{
            width: 66%;
        }
    }
    .fashion_man{
        position: absolute;
        top: r(290px);
        left: r(20px);
        z-index: 1;
         animation: man 1s linear ;
       animation-fill-mode: forwards;
         animation-name:bounceInLeft ;
        img{
            width: 100%;
        }
    }
    .fashion_lady{
        position: absolute;
        top: r(140px);
        right: r(-312px);
        animation: lady 1s linear ;
       animation-fill-mode: forwards;
         animation-name:bounceInRight ;
        img{
            width: 48%;
        }
    }
    .fashion_fly{
        position: absolute;
        top: r(360px);
        left: r(260px);
        z-index: 1;
        animation: fly 2s linear  infinite ;
       animation-fill-mode: forwards;
//    animation-name:bounceInRight ;
//    animation-delay:200ms;
        img{
            width: 50%;
        }
    }
}
@keyframes fly{
    0%{
    opacity: 0;
        transform: translateX(300px);
    }
    to{
        width: 100%;
        transform: translateX(-300px);
    }
}
#result{
    display: none;
    transition: all .5s;
    width:100%;
    height: 100%;
    overflow: hidden;
     position: absolute;
     left: 0;
    top: 0;
    .result-bg{
        width: r(231px);
        height: r(269px);
        position: absolute;
        @include center;
        top: r(122px);
        overflow: initial;
        img{
            @include center;
            top: -999px;
            bottom: -999px;
            transform-origin: 50% 51%;

        }
    }
    .user-message{
        width: r(294px);
        height: r(108px);
        overflow: hidden;
        background: url(../img/result-page/user-title-bg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        left: r(15px);
        top: r(16px);
        line-height: r(108px);
        .user-icon{
            width: r(70px);
            height: r(70px);
            border-radius: 50%;
            overflow: hidden;
            vertical-align: middle;
            position: absolute;
            top: r(18px);
            left: r(22px);
            z-index: 2;
            img{
                width: 110%;
            }
        }
        .username{
            margin-left: r(100px);
            font-size: r(24px);
            white-space: nowrap;
            width: r(180px);
            overflow: hidden;
        }
    }
    .result-logo{
        width: r(262px);
        height: r(78px);
        overflow: hidden;
        position: absolute;
        right: r(16px);
        top: r(16px);
        img{
            width: 100%;
            vertical-align: middle;
        }
    }
    .duanwei{
        width: r(231px);
        height: r(269px);

        @include center;
        top: r(122px);
        img{
            height: 100%;
        }
    }
    .answer-result{
        width: r(340px);
        height: r(102px);

        @include center;
        top:r(385px);
        background: url(../img/result-page/result-answer-bg.png);
        background-size: 100%;
        line-height: r(102px);
        text-align: center;
        font-size: r(50px);
    }
    .wenan{
        width: r(709px);
        height:r(200px);

        background: url(../img/result-page/result-wenan-bg.png) no-repeat;
        background-size:100% ;
        @include center;
        top: r(494px);
        font-size: r(32px);
        line-height: r(56px);
        padding-top: r(36px);  
        .text{
            width: r(580px);
            margin: auto;
            text-align: center;
        }      
    }
    .challengeAgain{
        width: r(305px);
        height: r(114px);
        background: url(../img/result-page/challengeAgain-bg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: r(712px);
        left: r(38px);
        animation: challenge 2s infinite linear;
        a{
            margin-left: r(96px);
            color: #666666;
        }
    }
    a{
        display: inline-block;
        font-size: r(34px);
        width: 100%;
        height: 100%;
        line-height: r(100px);
        margin-left: r(36px);
        color: #666666;
    }
    .share{
        width: r(346px);
        height: r(112px);
        background: url(../img/result-page/pengyouquan-bg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: r(712px);
        right: r(22px);
        overflow: hidden;
        animation: challenge 2s infinite linear;
        a{
            margin-left: r(60px);
            color: #666666;
        }
    }
    .paihang-title{
        width: r(417px);
        height: r(119px);

        @include center;
        top: r(830px);
        z-index: 1;
        
        img{
            width: 100%;
        }
    }
    .paihang-content{
        width: r(685px);
        height: r(282px);
        background: url(../img/result-page/paiming-bg.png);
        background-size: 100%;

        @include center;
        top: r(908px); 
        ul{
            padding-top: r(40px);
            li{
                height: r(70px);
                line-height: r(70px);
                margin-bottom: r(5px);
                font-size: r(32px);
                &::after{
                    content: "";
                    display: block;
                    clear: both;
                }
                div{
                    float: left;
                }
                .index{
                    width: r(56px);
                    text-align: center;
                    line-height: r(70px);
                    margin-left: r(20px);
                }
                .name{
                    height: r(70px);
                    line-height: r(70px);
                    .user-icon{
                        width: r(70px);
                        height: r(70px);
                        overflow: hidden;
                        display: inline-block;
                        vertical-align: middle;
                        line-height: r(70px);
                        margin-right: r(12px);
                        img{
                            height: 100%;
                        }
                    }
                }
                .pingfen{
                    float: right;
                    height: r(70px);
                    line-height: r(70px);
                    .duanwei-icon{
                        display: inline-block;
                        width: r(48px);
                        height: r(66px);
                        overflow: hidden;
                        vertical-align: middle;
                        margin: 0 r(50px) 0 r(22px);
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }     
    }
}
@keyframes challenge{
    0%{ transform: translateX(0px);}
    25%{ transform: translateX(-5px);}
    50%{ transform: translateX(0px);}
    75%{transform: translateX(5px);}
    100%{transform: translateX(0px);}
}